From mboxrd@z Thu Jan  1 00:00:00 1970
Return-Path: <zxce3@gnuweeb.org>
X-Spam-Checker-Version: SpamAssassin 3.4.6 (2021-04-09) on gnuweeb.org
X-Spam-Level: 
X-Spam-Status: No, score=-1.2 required=5.0 tests=ALL_TRUSTED,DKIM_SIGNED,
	DKIM_VALID,DKIM_VALID_AU,DKIM_VALID_EF,URIBL_BLOCKED autolearn=ham
	autolearn_force=no version=3.4.6
DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/simple; d=gnuweeb.org;
	s=default; t=1682710509;
	bh=ZLIYx/KM7jhF9wt6XubXuSamTFyCdTyYWCyFRJD5sQE=;
	h=From:To:Cc:Subject:Date:In-Reply-To:References;
	b=jSM2Nx+RT0ddgpGNy81wTlvVHb6PQwk8Xzpr2nEUPGEbVBQ5v85v27VBAB4BjujLB
	 0e+VVdPNZYhbdMDqBr/1h7YFRPW/SOKPEFlRH3qKIUA4jZ+20lK9TaFermAEXczfVx
	 D05z302hUGhaNIWkqTwUDv8dNuwPcCWoS/viql6MH3tCvhCLhCVpSb6GxKE9tIMM1A
	 XrMMYZjj9tU7zH18vufJheTU8/dkFcgCI7h2cthtyuRr79G83B02leoFhPXRVNbYX6
	 /RYWIe9YBc1hFwrqOMvwbxNe9nL17lBukV3PFIE1xrnLVZdXSxYTm4di17dR8aAlRf
	 v0XftXsf+58NA==
Received: from localhost.localdomain (unknown [114.125.26.160])
	by gnuweeb.org (Postfix) with ESMTPSA id A46F0245A6A;
	Sat, 29 Apr 2023 02:35:07 +0700 (WIB)
From: Memet Zx <zxce3@gnuweeb.org>
To: Ammar Faizi <ammarfaizi2@gnuweeb.org>
Cc: Memet Zx <zxce3@gnuweeb.org>,
	GNU/Weeb Mailing List <gwml@vger.gnuweeb.org>,
	Memet Zx <memetpea25@gmail.com>
Subject: [PATCH gwspamd 1/3] gwspamd: web: Refactor Settings Page Layout and UI
Date: Sat, 29 Apr 2023 02:34:56 +0700
Message-Id: <20230428193458.366546-2-zxce3@gnuweeb.org>
X-Mailer: git-send-email 2.34.1
In-Reply-To: <20230428193458.366546-1-zxce3@gnuweeb.org>
References: <20230428193458.366546-1-zxce3@gnuweeb.org>
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit
List-Id: <gwml.vger.gnuweeb.org>

The previous layout consisted of a table with a list of settings
options, while the new layout includes a sidebar with a list of
settings options and a larger content area to display the selected
option. The code also includes new CSS classes to style the UI, and the
JavaScript functions were updated to handle the new layout.
Additionally, the default selected option was changed to "profile" if
no section is specified in the URL.

Link: https://t.me/GNUWeeb/742183
Link: https://t.me/GNUWeeb/742193
Signed-off-by: Memet Zx <zxce3@gnuweeb.org>
---
 web/views/pages/settings.php | 42 +++++++++++++++++-------------------
 1 file changed, 20 insertions(+), 22 deletions(-)

diff --git a/web/views/pages/settings.php b/web/views/pages/settings.php
index e37ebfc..dd52d7a 100644
--- a/web/views/pages/settings.php
+++ b/web/views/pages/settings.php
@@ -26,50 +26,48 @@ if (isset(SECTIONS[$section])) {
 		}
 	}
 </script>
-
-<div id="main-box" class="content">
-	<h1 class="content-title">Settings</h1>
-	<div id="back-to-menu-box" style="display:none;">
-		<a class="btn btn-action" onclick="load_section_url('default', event);" href="?">Back to settings</a>
-	</div>
-	<table style="display:none;" id="set-default">
+<div class="row">
+<div class="col-lg-3">
+	<div class="content">
+		<h2 class="content-title">Settings</h2>
 		<?php foreach (SECTIONS as $sec => $title) : ?>
-			<tr>
-				<td>
-					<a class="btn btn-action mt-5" onclick="load_section_url('<?= $sec; ?>', event);" href="?section=<?= e($sec); ?>"><?= e($title); ?></a>
-				</td>
-			</tr>
+			<a class="btn sidebar-link mt-5 setting-btn" id="btn-<?= e($sec); ?>" onclick="load_section_url('<?= $sec; ?>', event);" href="?section=<?= e($sec); ?>"><?= e($title); ?></a>
 		<?php endforeach; ?>
-	</table>
+	</div>
+</div>
+<div class="col-lg-9">
 	<?php foreach (SECTIONS as $key => $title) : ?>
-		<div class="setting-box" style="display:none;" id="set-<?= e($key); ?>">
+		<div class="content" style="display:none;" id="set-<?= e($key); ?>">
 			<?php require __DIR__ . "/settings/{$key}.php"; ?>
 		</div>
 	<?php endforeach; ?>
 </div>
-
+</div>
 <script>
-	const sections = <?= json_encode(array_merge(array_keys(SECTIONS), ["default"])); ?>;
-	const back = gid("back-to-menu-box");
+	const sections = <?= json_encode(array_keys(SECTIONS)); ?>;
 
 	function hide_all_sections() {
-		back.style.display = "none";
 		for (let i = 0; i < sections.length; i++)
 			gid("set-" + sections[i]).style.display = "none";
+		let settings_btn = document.getElementsByClassName("setting-btn");
+		for (let i = 0; i < sections.length; i++)
+			settings_btn[i].classList.remove("btn-primary");
 	}
 
 	function load_section(section) {
 		hide_all_sections();
 		gid("set-" + section).style.display = "";
-		back.style.display = (section === "default") ? "none" : "";
+		gid("btn-" + section).classList.add("btn-primary");
 	}
 
 	function load_section_url(section, e = null) {
-		if (e !== null)
-			e.preventDefault();
 		load_section(section);
+		if (e !== null) {
+			e.preventDefault();
+			e.target.classList.add("btn-primary");
+		}
 		history.pushState(null, null, "?section=" + section);
 	}
 
-	load_section("<?= isset(SECTIONS[$section]) ? $section : "default" ?>");
+	load_section("<?= isset(SECTIONS[$section]) ? $section : "profile" ?>");
 </script>
-- 
Memet Zx